<!--
 * @Description: 弹窗广告组件
 * @Author: Kerwin
 * @Date: 2024-09-25 14:43:48
 * @LastEditTime: 2024-09-27 10:42:35
 * @LastEditors:  Please set LastEditors
-->

<template>
    <view class="c_mian">
        <u-popup v-model="show" mode="center" closeable :mask="true" class="c_pop_up">
            <view class="c_pop_up_content">
                <view v-if="advList.length > 0" @click="handleClick(0, advList)">
                    <image style="display: block;" :src="getImgFullPath(advList[0]?.imageUrl)" mode="widthFix" />
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { baseApi } from "@/api";
import { getQueryObject } from "@/utils/common";
import { getImgFullPath } from "@/utils";

const props = defineProps({
    background: {
        type: String,
        default: '#fff'
    }
})

const show = ref(false)
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}
const advList = ref<{
    imageUrl: string,
    objectType: number,
    webUrl: string,
}[]>([])
const load = async () => {
    const { data } = await baseApi.getAdvertisingList({
        noPaging: true,
        type: baseApi.advertising_enum.ADV_HOME_POPUP
    })
    advList.value = data
    setTimeout(() => {
        open()
    }, 500)
}
const handleClick = (i: number, dataList: any[]) => {
    const data = dataList[i]
    const { objectType, webUrl, content } = data
    switch (objectType) {
        case 0:
        case 8:
            // dev const url = ''
            if (webUrl) {
                const params = getQueryObject(webUrl)
                // @ts-ignore
                if (params?.redirect_url) {
                    uni.navigateTo({
                        // @ts-ignore
                        url: params.redirect_url,
                        fail: (res) => {
                            uni.navigateTo({
                                url: `/pages/webview/index?url=${webUrl}`
                            })
                        }
                    })
                    return
                }
                uni.navigateTo({
                    url: `/pages/webview/index?url=${webUrl}`
                })
            }
            break
        case 13:
            if (content) {
                const obj = JSON.parse(content)
                uni.navigateTo({
                    url: `/pages/physicalShop/index?shopId=${obj.id}&shopType=${obj.shopType}`
                })
            }
            break
        case 10:
            if (content) {
                const obj = JSON.parse(content)
                uni.navigateTo({
                    url: `/pages/productDetail/index?shopId=${obj.shopId}&productId=${obj.productId}`
                })
            }
            break
        default:
            break
    }
    close()
}
defineExpose({
    open,
    close,
    load
})
</script>
<style scoped lang="scss">
.c_pop_up {
    :deep(.u-mode-center-box) {
        background-color: v-bind('props.background');
    }

    .c_pop_up_content {
        animation: flip 0.6s forwards, pulse 1.45s 0.6s infinite ease-in-out;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes flip {
    0% {
        transform: scale(0) rotateY(0deg);
    }

    50% {
        transform: scale(0.5) rotateY(180deg);
    }

    100% {
        transform: scale(1) rotateY(360deg);
    }
}
</style>